<template>
  <div>
    <slot
      name="header"
      :select="select"
    />
    <el-table
      :data="data"
      tooltip-effect="light"
      v-bind="$attrs"
      v-on="$listeners"
      :header-cell-style="{color:'#333',fontSize:'14px',fontWeight:600,background:'#F2F7FF',textAlign: 'center'}"
      :cell-style="{color:'#666666',textAlign: 'center'}"
      @selection-change="handleSelectionChange"
      id="table"
    >
      <div
        v-if="this.$slots.empty"
        slot="empty"
      >
        <slot name="empty" />
      </div>
      <slot />
    </el-table>
    <div
      class="flex-h right "
      style="padding: 23px 0"
    >
      <el-pagination
        background
        :current-page.sync="page.pageNum"
        :page-size.sync="page.pageSize"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="request"
        @current-change="request"
      />
      <div>
        <el-button size="mini">
          跳转
        </el-button>
      </div>
    </div>
    <slot
      name="footer"
      :select="select"
    />
  </div>
</template>

<script>
/*
<el-button type="primary" :disabled=""></el-button>
<el-input v-model="" placeholder="" clearable @keyup.enter.native="$event.target.blur" @change="" suffix-icon="el-icon-" />
<SelectInput :option="" placeholder="" />
<el-table-column label="" prop="" align="" />
 */
const INIT_PAGE_NUM = 1

export default {
  name: 'TablePublicComponent',
  props: {
    total: {
      type: Number,
      default: 0
    },
    data: {
      default: () => ([]),
      type: Array
    },
    /**
     * 获取数据的方法
     */
    request: {
      required: true,
      type: Function
    },
    watch: {
      type: [String, Number],
      default: undefined
    }
  },
  data() {
    return {
      page: {
        pageNum: INIT_PAGE_NUM,
        pageSize: 10
      },
      select: []
    }
  },
  watch: {
    watch() {
      this.refresh()
    }
  },
  mounted() {
    this.$attrs.banInit || setTimeout(() => this.request(), 0)
  },
  methods: {
    refresh() {
      this.page.pageNum = INIT_PAGE_NUM
      this.request()
    },
    handleSelectionChange(val) {
      this.select = val
    }
  }
}
</script>
<style scoped>
  .el-table{
    border: 1px solid #ebeef5;
    border-bottom: none;
  }
  .no-data{
    margin-top: 10px;
    width: 100%;
    font-size: 18px;
    color: #606266;
    text-align: center;
  }
</style>
